<template>
  <div class="file-load">
    <p>文件上传</p>
    <input type="file" v-on:change="onFileChange">
    <p>选择的文件：{{ selectedFile ? selectedFile.name : '未选择文件' }}</p>
    <el-button @click="upload">上传</el-button>
  </div>
  <div>
    <p>图片渲染</p>
    <img :src="imageSrc">
  </div>
  <div>
    <div>文件上传组件封装</div>
    <ImageSelect v-model:file="selectedFile" v-model:image-url="imagePath" />
  </div>
</template>
 
<script setup lang="ts">
import ImageSelect from "@/components/ImageSelect.vue";
import { ref } from "vue";
import { uploadFile, getFileUrl, getFile } from "@/api/fileManage/index"

const selectedFile = ref<File | undefined>();
const imagePath = ref("");

const onFileChange = async (e: Event) => {
  const target = e.target as HTMLInputElement;
  if (target.files && target.files.length > 0) {
    selectedFile.value = target.files[0];

    const reader = new FileReader();

    reader.onload = (event) => {
      imageSrc.value = event.target?.result as string;
    };

    reader.readAsDataURL(target.files[0]);
  }
}

const upload = async () => {
  imagePath.value = getFileUrl('file-manage/Snipaste_2023-12-19_21-17-44.jpg');
  console.log(import.meta.env)
  if (selectedFile.value != null) {
    await uploadFile(selectedFile.value);
  }
}

const imageSrc = ref<string>();
</script >



<style>
.file-load {
  background-color: antiquewhite;
}
</style>